<template>
  <Container class="role-edit">
    <div class="container-header title title-center" slot="header">
      {{ title }}
      <Button size="large" class="fl btn-back" icon="ios-arrow-back" @click="jumpPrevPage">返回</Button>
    </div>
    <div class="bgs bg-white">
      <div class="content ">
        <Tabs v-model="tab" >
          <TabPane label name="tab1">
            <Table
              :height="options.tableHeight"
              stripe
              border
              :columns="list.columns"
              :data="list.data"
              no-data-text="亲，没有找到相关记录哦！~"
            ></Table>
            <div class="pager">
              <Page
                :total="list.totalItem"
                :current="list.currentPage"
                :page-size="list.pageSize"
                @on-change="onPageChange"
                @on-page-size-change="onPageSizeChange"
                show-sizer
                placement="top"
              ></Page>
            </div>
            <Loader :status="list.status" @refresh="getData"></Loader>
            <RebateModaIteml ref="rebateDetailsModal"  @success="getData" />
          </TabPane>
        </Tabs>
      </div>
    </div>
    <div class="container-footer bg-white" slot="footer">
      <div>
        <Button type="primary" class="mr" size="large" @click="jumpPrevPage">取消</Button>
      </div>
    </div>
  </Container>
</template>

<script>
import RebateModaIteml from './edit/RebateModaIteml'
import expandRow from './edit/table-expand.vue'
import { renderButton,  formatDate} from '@/util'
export default {
  name: 'report-rebate-edit',
  components: { 
    RebateModaIteml,
    expandRow
  },
  data() {
    return {
      tab: 'tab1',
      options: {
        tableHeight: 500
      },
      id: this.$route.query.id || null,
      storeId: this.$route.query.storeId|| null,
      year: this.$route.query.year|| null,
      loading: false,
      title: this.$route.query.title || null,
      orderNo: '',
      orderId: '',
      list: {
        currentPage:1,
        pageSize:window.$pageSize,
        totalItem: 0,
        columns: [
          {
            type: 'expand',
            width: 50,
            render: (h, params) => {
              return h(expandRow, {
                props: {
                  row: params.row
                }
              })
            }
          }, {
            title: '单号',
            key: 'orderNo',
            align: 'left',
            minWidth: 200,
             render: (h, params) => {
              return ( <div > 
                 {
                h('span', {
                    style: {
                        color: '#21a4ff',
                        'margin-right':'10px'
                    }
                },params.row.orderNo)
                }
                {
                  renderButton(h, { text: '详情', type: 'primary' },
                    () => { 
                         this.onDetails({
                           row: params.row,
                           type: 'order'
                         })
                    })
                } 
                </div>
              )
            }
          }, {
            title: '时间',
            key: 'orderTime',
            align: 'left',
            minWidth: 200
          }, {
            title: '使用返利(元)',
            key: 'rebate',
            align: 'left',
            minWidth: 200,
            renderHeader: (h, params) => {
              let oDiv = h('div', [
                h('span', '使用返利(元)'),
                h('Icon', {
                  props: {
                    type: 'ios-help-circle'
                  }
                })
              ])
              return h('Tooltip', {
                style: {
                  cursor: 'pointer'
                },
                props: {
                  transfer: true,
                  content: '负数记录为订单发生了退款'
                }
              }, [oDiv])
            }
          }
        ],
        data: [],
        status: 'pass'
      }
    }
  },
  methods: {
    getData() {
      this.list.status = 'loading'
      let params = {
        current: this.list.currentPage,
        size: this.list.pageSize,
        year:this.year,
        storeId:this.storeId
      }
      this.$ajaxGet('/report/store_rebate_year_report/order_page', params ).then(data => {
          this.list.data = []
          this.list.totalItem = Number(data.total)
          this.list.data = (data.records || []).map(item=>{
            return{
              orderTime:formatDate(item.orderTime),
              orderNo:item.orderNo,
              rebate:item.rebate,
              orderId:item.orderId,
              purchOrderRefunds:item.purchOrderRefunds,
              _disableExpand: item.purchOrderRefunds.length === 0
            }
          })
          this.list.status = 'pass'
      })
    },
    onDetails(row) {
      this.$refs.rebateDetailsModal.open(row)
    },
     onPageChange(number) {
      this.list.currentPage = number
      this.$router.push({
        query: {
          currentPage: this.list.currentPage,
          pageSize: this.list.pageSize,
          year:this.year,
          storeId:this.storeId
        }
      })
      this.getData()
    },
    onPageSizeChange(pageSize) {
      this.list.currentPage = 1
      this.list.pageSize = pageSize
      this.$router.push({
        query: {
          currentPage: this.list.currentPage,
          pageSize: this.list.pageSize,
          year:this.year,
          storeId:this.storeId
        }
      })
      this.getData()
    },
    jumpPrevPage() {
      this.$router.back()
    }
  },
  mounted() {
    this.getData()
  }
};
</script>
<style scoped>
 /deep/ .ivu-tabs-bar{
    height: 0;
    border: 0;
}
</style>